<template>
  <div class="boradCount">
    <Card :bordered="false">
      <p slot="title"
         class="white">统计分析 > <span class="select-font">河长牌统计</span></p>
      <div class="topCount">
        <span>共{{numObj.all_num}}条河流</span>
        <span>{{numObj.h_num}}条河流已有河长牌</span>
        <span>{{numObj.nh_num}}条河流暂无河长牌</span>
        <span>河长牌总数量:{{numObj.board_count}}</span>
        <CheckboxGroup style="display: inline-block"
                       v-model="searchItem.type">
          <Checkbox label="已有河长牌"></Checkbox>
          <Checkbox label="暂无河长牌"></Checkbox>
        </CheckboxGroup>
      </div>
    </Card>
    <div>
      <Table :data="countData"
             :columns="countColumns"
             stripe></Table>
      <Page class="pull-right"
            :total="Page.total"
            :current="Page.current"
            :page-size="Page.pageSize"
            size="small"
            show-total
            @on-change="changePage"></Page>
    </div>
    <Modal v-model="boardModal"
           title="河长牌信息"
           :mask-closable="false"
           width="1000">
      <Table :data="boardData"
             :columns="boardColumns"
             stripe></Table>
    </Modal>
    <pictures ref="pictures"></pictures>
  </div>
</template>

<script>
import { ajaxPost } from 'global/axios';
import storage from 'good-storage';
import tableDropdown from 'public/tableHeaderDropdown';
import picture from 'public/picture';
import { domain2 } from 'global/setting';
export default {
  components: {
    pictures: picture,
  },
  data() {
    return {
      utlTownList: '/law/city/list',
      urlBoradList: '/bis/board/statview',
      searchItem: {
        area: '',
        town: '',
        type: [],
      },
      boardData: [],
      boardModal: false,
      boardColumns: [
        {
          title: '河涌名',
          key: 'river_name',
        },
        {
          title: '公示牌编号',
          key: 'board_no',
        },
        {
          title: '地址',
          key: 'address',
        },
        {
          title: '上传用户',
          key: 'realname',
        },
        {
          title: '上传时间',
          render: (h, params) => {
            let time = params.row.date_time.substr(0, 10);
            return h('div', time);
          },
        },
        {
          title: '所属区',
          key: 'area',
        },
        {
          title: '所属镇',
          key: 'town',
        },
        {
          title: '图片',
          render: (h, params) => {
            if (params.row.photo_list.length > 0) {
              let html = [];
              for (let i = 0; i < params.row.photo_list.length; i++) {
                html.push(
                  h('img', {
                    attrs: {
                      src: domain2 + params.row.photo_list[i],
                    },
                    style: {
                      width: '50px',
                      height: '50px',
                    },
                    on: {
                      click: () => {
                        this.$refs.pictures.showImg(params.row.photo_list, i);
                      },
                    },
                  })
                );
              }
              return h('div', html);
            } else {
              return null;
            }
          },
        },
      ],
      countData: [],
      countColumns: [
        {
          title: '河涌名',
          key: 'river_name',
        },
        {
          title: '河涌编号',
          key: 'river_no',
        },
        {
          title: '所属区',
          key: 'area',
          renderHeader: (h, params) => {
            return h(tableDropdown, {
              props: {
                placement: 'bottom-start',
                showArrow: true,
                content: '所属区',
                data: [
                  { name: '全部', value: 'all' },
                  { name: '禅城区', value: '禅城区' },
                  { name: '顺德区', value: '顺德区' },
                  { name: '南海区', value: '南海区' },
                  { name: '三水区', value: '三水区' },
                  { name: '高明区', value: '高明区' },
                ],
              },
              on: {
                'on-choosed': data => {
                  if (data !== 'all') {
                    this.searchItem.area = data;
                    this.searchItem.town = '';
                    this.getData();
                  } else {
                    this.searchItem.area = '';
                    this.getData();
                  }
                },
              },
            });
          },
        },
        {
          title: '所属镇',
          key: 'town',
          renderHeader: (h, params) => {
            return h(tableDropdown, {
              props: {
                placement: 'bottom-start',
                showArrow: true,
                content: '所属镇',
                data: this.townList,
              },
              on: {
                'on-choosed': data => {
                  if (data !== 'all') {
                    this.searchItem.town = data;
                    this.getData();
                  } else {
                    this.searchItem.town = '';
                    this.getData();
                  }
                },
              },
            });
          },
        },
        {
          title: '河长牌数量',
          align: 'center',
          render: (h, params) => {
            return h(
              'div',
              {
                style: {
                  cursor: 'pointer',
                },
                on: {
                  click: () => {
                    this.boardModal = true;
                    this.getBoardList(params.row);
                  },
                },
              },
              params.row.board
            );
          },
        },
      ],
      Page: {
        current: 1,
        pageSize: 11,
        total: 0,
      },
      townList: [],
      numObj: {
        all_num: '',
        h_num: '',
        nh_num: '',
        board_count: '',
      },
    };
  },
  methods: {
    getTown() {
      let params = {
        data: {
          searchValue: { level: '3' },
          basis: 2,
        },
        url: this.utlTownList,
        token: storage.session.get('token'),
        success: res => {
          this.$Loading.finish();
          this.townList = [{ name: '全部', value: 'all' }];
          res.data.result.result.map(item => {
            this.townList.push({ name: item.name, value: item.name });
          });
        },
      };
      if (this.searchItem.area !== '') {
        params.data.searchValue.level2 = this.searchItem.area;
      }
      ajaxPost(params);
    },
    changePage(data) {
      this.Page.page = data;
      this.getData();
    },
    getData() {
      let params = {
        data: {
          searchValue: {},
          page: this.Page.page,
          pageSize: this.Page.pageSize,
        },
        url: this.urlBoradList,
        token: storage.session.get('token'),
        success: res => {
          this.countData = res.data.result.result;
          this.numObj.all_num = res.data.result.all_num;
          this.numObj.h_num = res.data.result.h_num;
          this.numObj.nh_num = res.data.result.nh_num;
          this.numObj.board_count = res.data.result.board_count;
          this.Page.total = res.data.result.totalSize;
        },
      };
      if (this.searchItem.area !== '') {
        params.data.searchValue.area = this.searchItem.area;
      }
      if (this.searchItem.town !== '') {
        params.data.searchValue.town = this.searchItem.town;
      }
      let lengths = this.searchItem.type.length;
      if (lengths === 1 && this.searchItem.type[0] === '已有河长牌') {
        params.data.select_show = 1;
      } else if (lengths === 1 && this.searchItem.type[0] === '暂无河长牌') {
        params.data.select_show = 2;
      }
      ajaxPost(params);
    },
    getBoardList(row) {
      let params = {
        data: {
          searchValue: {
            river_no: row.river_no,
          },
        },
        url: '/bis/board/list',
        token: storage.session.get('token'),
        success: res => {
          this.boardData = res.data.result.result;
        },
      };
      ajaxPost(params);
    },
  },
  watch: {
    'searchItem.area'() {
      this.getTown();
    },
    'searchItem.type'() {
      this.getData();
    },
  },
  mounted() {
    this.getTown();
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.boradCount {
  .topCount {
    span {
      display: inline-block;
      margin-right: 15px;
      font-size: 16px;
    }
  }
}
</style>
